<template>
  <!-- 资源管理列表 -->
  <div class="resource-wrapper">
    <div class="resource-title">资源按钮</div>
    <el-button type="primary" @click="openResource">资源管理</el-button>
    <!-- 资源管理器 -->
    <resource
      ref="resource"
      style="display:none"
    ></resource>
    <div class="resource-title">上传按钮</div>
    <el-button type="success" @click="openUpload">图片上传</el-button>
    <single-upload
      ref="upload" 
      :allowedNumber="3" 
      @uploaded="insertUploaded"
    ></single-upload>
  </div>
</template>

<script>
import Resource from '@/components/Upload/resource'
import SingleUpload from '@/components/Upload/single'

export default {
  components: {
    Resource,
    SingleUpload
  },
  methods: {
    //打开资源管理
    openResource() {
      this.$refs.resource.openDialog()
    },
    //打开图片上传
    openUpload() {
      this.$refs.upload.openDialog()
    },
    //插入上传的图片
    insertUploaded(data) {
      this.$message.error('该操作须在文章编辑器中进行！')
    },
  }
}
</script>

<style lang="scss" scoped>
.resource-wrapper {
  padding: 10px;
  .resource-title {
    color: #333;
    margin-bottom: 10px;
    margin-top: 10px;
  }
}
</style>